<script lang="ts" setup>
import { reactive, onActivated } from 'vue'
import { useTable } from '@/hooks/useTable'
import { queryStoreActivity } from '@/api/store'
import { queryStoreActivityTableCol } from '@/api/store/types/store'
import { getToken } from '@/utils/cache/cookies'
import { useRoute } from 'vue-router'
const route = useRoute()
const form = reactive({
  boxCode: '',
  storeId: route.query.storeId
})

const { data, loading, pagination, load, handleCurrentChange, handleSizeChange } =
  useTable<queryStoreActivityTableCol>(queryStoreActivity, getToken() ?? '', () => form)

const setId = (id: string) => {
  form.storeId = id
}
defineExpose({ load, setId })
onActivated(() => {
  form.storeId = route.query.storeId
})
</script>

<template>
  <el-table :data="data" v-loading="loading">
    <el-table-column prop="name" label="活动名称" />
    <el-table-column prop="amount" label="金额" />
    <el-table-column prop="tags" label="适用范围" />
    <el-table-column prop="description" label="活动说明">
      <template #default="scope">
        <span v-html="scope.row.description" />
      </template>
    </el-table-column>
  </el-table>
  <div flex justify-end mt-20>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      v-model:current-page="pagination.pageNum"
      v-model:page-size="pagination.pageSize"
      background
      :total="pagination.total"
      layout="total,prev,pager,next,jumper,sizes"
    />
  </div>
</template>

<style scoped></style>
